import {defineComponent} from "vue";
import {Card, Col, Collapse, Row} from "ant-design-vue";


// const treeData = [
//     {
//         key: '1',
//         group:'ca',
//         title: 'Category 1',
//         children: [
//             { key: '1-1', attribute: 'Attribute 1-1', value: 'Value 1-1' },
//             { key: '1-2', attribute: 'Attribute 1-2', value: 'Value 1-2' }
//         ]
//     },
//     {
//         key: '2',
//         group:'ca',
//         title: 'Category 2',
//         children: [
//             { key: '2-1', attribute: 'Attribute 2-1', value: 'Value 2-1' },
//             { key: '2-2', attribute: 'Attribute 2-2', value: 'Value 2-2' },
//             { key: '2-3', attribute: 'Attribute 2-3', value: 'Value 2-3' }
//         ]
//     },
//     {
//         key: '3',
//         group:'ca',
//         title: 'Category 3',
//         children: [
//             { key: '3-1', attribute: 'Attribute 3-1', value: 'Value 3-1' }
//         ]
//     }
// ];

const treeData = [
    {
        key: '1',
        title: 'Category 1',
        children: [
            {key: '1-1', attribute: 'Attribute 1-1', value: 'Value 1-1', span: 12},
            {key: '1-2', attribute: 'Attribute 1-2', value: 'Value 1-2', span: 12}
        ]
    },
    {
        key: '2',
        title: 'Category 2',
        children: [
            {key: '2-1', attribute: 'Attribute 2-1', value: 'Value 2-1', span: 24},
            {key: '2-2', attribute: 'Attribute 2-2', value: 'Value 2-2', span: 12},
            {key: '2-3', attribute: 'Attribute 2-3', value: 'Value 2-3', span: 12}
        ]
    },
    {
        key: '3',
        title: 'Category 3',
        children: [
            {key: '3-1', attribute: 'Attribute 3-1', value: 'Value 3-1', span: 24}
        ]
    }
];


export default defineComponent({
    props: {},
    setup() {
        return () => (
            <div>
                <Collapse>
                    {treeData.map((item) => (
                        <Collapse.Panel header={item.title} key={item.key}>
                            <Card title={item.title}>
                                <Row gutter={[16, 16]}>
                                    {item.children.map((child) => (
                                        <Col key={child.key} span={child.span}>
                                            <Card.Grid style={{width: '100%'}}>
                                                <div><strong>{child.attribute}:</strong> {child.value}</div>
                                            </Card.Grid>
                                        </Col>
                                    ))}
                                </Row>
                            </Card>
                        </Collapse.Panel>
                    ))}
                </Collapse></div>
        )
    },
});